;
(function () {
    $(function () {
        // 引头部
        $('.zfg-cake-header').load('../header_footer/cakeheader.html')
        // 尾部
        $('.zfg-cake-foot').load('../header_footer/Foot/html/foot.html')
    })
    let zfgleft = document.querySelector(".zfg-left ul")
    let zfgright = document.querySelector(".zfg-right ul")
    let json = []
    
    pAjax({
        url: '../server/detail.php',
        type: 'get',
        data: {
            id: localStorage.getItem('cakeImg') - 0,

        }
    }).then(function (res) {
        json = JSON.parse(res);
        //    console.log(json);
        let zfgtitle = document.querySelector("title")
        zfgtitle.innerHTML = `${json.cake_Ename} 橘与桔__蛋糕网上订购_5小时新鲜送达_21Cake官网`
        zfgleft.innerHTML = `
       <li class="active" style="opacity:1; filter:alpha(opacity=100);">
       <img data-src="${json.cake_detail_small_img1}" />
        </li>
        <li>
       <img data-src="${json.cake_detail_small_img2}" />
        </li>
        <li>
       <img data-src="${json.cake_detail_small_img3}" />
        </li>
        <li>
       <img data-src="${json.cake_detail_small_img4}" />
        </li>
       `
        zfgright.innerHTML = `
       <li class="active"><img data-src="${json.cake_detail_small_img1}" /></li>
                    <li><img data-src="${json.cake_detail_small_img2}" /></li>
                    <li><img data-src="${json.cake_detail_small_img3}" /></li>
                    <li><img data-src="${json.cake_detail_small_img4}" /></li>`
        // 详情页选项卡
        $(function () {
            var oFocus = $('#focus'),
                oRight = oFocus.find('.zfg-right'),
                oLeft = oFocus.find('.zfg-left'),
                aRLi = oRight.find('li'),
                aLLi = oLeft.find('li'),
                index = 0,
                timer = null;
            aRLi.mouseover(function () {
                index = $(this).index()
                $(this).addClass('active').siblings().removeClass();
                aLLi.eq(index).addClass('active').siblings().removeClass();
                aLLi.eq(index).stop().animate({
                    'opacity': 1
                }, 300).siblings().stop().animate({
                    'opacity': 0
                }, 300);
                // stopFoucs();
            })

            // function startFocus() {
            //     index++;
            //     index = index > aRLi.size() - 1 ? 0 : index;
            //     aLLi.eq(index).addClass('active').siblings().removeClass();

            // }

        })
        let contL = document.querySelector('.zfg-details-cont-L');
        contL.innerHTML = `
                <h3>${json.cake_Ename}</h3>
            <div class="zfg-details-span">
                <a href="javascript:;">${json.cake_bottom_tig1} </a>
                <a href="javascript:;">${json.cake_bottom_tig2} </a>
            </div>
            <ul class="zfg-details-ul">
                <li>
                    <img data-src="${json.cake_detail_img1}" alt="奶油">
                    <span>${
                        json.cake_detail_text1
                     }</span>
                </li>
                <li>
                    <img data-src="${json.cake_detail_img2}"
                        alt="卡曼橘">
                    <span>${
                        json.cake_detail_text2
                     }</span>
                </li>
            </ul>
            <div class="zfg-details-text">
                    ${
                       json.cake_detail_text3
                    }
            </div>
            <ul class="zfg-details-icon">
                <li class="zfg-details-icon1"><i></i><span>保鲜条件：0－4℃保藏10小时，5℃食用为佳</span></li>
                <li class="zfg-details-icon2" data-sweet="2">
                    <i></i>
                    <span style="margin-left:5px;">好评甜度：</span>
                    <div class="scoreDiv">
                        <div class="scoreStar">
                            <b class="star"><a class="choo"></a></b>
                            <b class="star"></b>
                            <b class="star"></b>
                            <b class="star"></b>
                            <b class="star"></b>
                        </div>
                    </div>

                </li>

            </ul>
                `
        //糖果五星点击事件
        $("div.scoreStar .star").click(function () {
            var index = $(this).index();
            var html = '<a class="choo"></a>';
            $("div.scoreStar .star").empty();
            scoreNum = index + 1;
            $("div.scoreStar .star").each(function (i, value) {
                if (i <= index) {
                    $(this).append(html);
                }
            })
        });

        let contR = document.querySelector('.zfg-details-cont-R')
        let arrstr = []
        if (json.cake_detail_specs) {
            arrstr.push(
                JSON.parse(json.cake_detail_specs)
            )
        }
        let arrstr1 = []
        if (json.cake_detail_size) {
            arrstr1.push(
                JSON.parse(json.cake_detail_size)
            )
        }
        // console.log(arrstr1);
        contR.innerHTML = `
        <div class="tabbox">

        <div class="zfg-content">
            <div class="active">
                <p class="zfg-details-price">¥<u>${arrstr[0][0]}</u></p>
                <div class="details-img-box">
                    <ol class="details-options">
                        <li class="details-options-size"><i></i>约27.5x27.5cm</li>
                        <li class="details-options-unmber"><i></i>15-20人</li>
                        <li class="details-options-laid"><i></i>含20套餐具（蜡烛需单独订购）</li>
                        <li class="details-options-time"><i></i>最早今天 15:00配送</li>
                        </ul>
                </div>
            </div>
            <div>
            <p class="zfg-details-price">¥<u>${arrstr[0][1]}</u></p>
            <div class="details-img-box">
                <ol class="details-options">
                    <li class="details-options-size"><i></i>约${arrstr1[0][0]}cm</li>
                    <li class="details-options-unmber"><i></i>${arrstr1[0][1]}人</li>
                    <li class="details-options-laid"><i></i>含${arrstr1[0][2]}套餐具（蜡烛需单独订购）</li>
                    <li class="details-options-time"><i></i>最早今天 ${arrstr1[0][3]}配送</li>
                    </ol>
            </div>
            </div>
            <div>
            <p class="zfg-details-price">¥<u>${arrstr[0][2]}</u></p>
            <div class="details-img-box">
            <ol class="details-options">
            <li class="details-options-size"><i></i>约${arrstr1[0][0]}cm</li>
            <li class="details-options-unmber"><i></i>${arrstr1[0][1]}人</li>
            <li class="details-options-laid"><i></i>含${arrstr1[0][2]}套餐具（蜡烛需单独订购）</li>
            <li class="details-options-time"><i></i>最早今天 ${arrstr1[0][3]}配送</li>
            </ol>
            </div>
            </div>
            <div>
            <p class="zfg-details-price">¥<u>${arrstr[0][3]}</u></p>
            <div class="details-img-box">
            <ol class="details-options">
            <li class="details-options-size"><i></i>约${arrstr1[0][0]}cm</li>
            <li class="details-options-unmber"><i></i>${arrstr1[0][1]}人</li>
            <li class="details-options-laid"><i></i>含${arrstr1[0][2]}套餐具（蜡烛需单独订购）</li>
            <li class="details-options-time"><i></i>最早今天 ${arrstr1[0][3]}配送</li>
            </ol>
            </div>
            </div>
            　　
        </div>
        <ul>
            <li class="active">${(arrstr[0][0].substring(7,11))}<i class="activei"></i></li>
            <li>${(arrstr[0][1].substring(7,11))}<i></i></li>
            <li>${(arrstr[0][2].substring(7,12))}<i></i></li>
            <li>${(arrstr[0][3].substring(7,12))}<i></i></li>
        </ul>
    </div>
    <span>商品规格</span>

    <div class="zfg-details-li">立即购买</div>
    <div class="zfg-details-jia" data-id ="${json.cake_id}">加入购物车
        <div class="zfg-details-jer">
            <s>成功添加到购物车</s>
        </div>
    </div>
        `
        // 加入购物车选项卡
        $(function () {
            $(".tabbox li").click(function () {
                //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
                $(this).addClass("active").siblings().removeClass("active")
                $(this).children('i').addClass("activei").parent().siblings().children()
                    .removeClass("activei")
                //获取选中元素的下标
                var index = $(this).index();
                $(this).parent().siblings().children().eq(index).addClass("active")
                    .siblings().removeClass("active");

            });

        });
        //    加入购物车跳转页面
        $('.zfg-details-li').click((e) => {
            window.location.href = "../page/cake_Car.html"


        })
        let newArr = []
        let jsonArr = []
        let jsonArrn = []
        var result = [];
        var obj = {};
        $('.zfg-details-jia').click((e) => {
            
            // console.log(1111);
            let id = e.target.getAttribute('data-id')
            let flag = true
            var shop1 = localStorage.getItem('cakeArr')
            if(shop1){
                var oldarr1 = JSON.parse(shop1)
                
            }else {
                var oldarr1 = []
                
            }
         
            console.log(oldarr1);
            oldarr1.forEach(ele => {
                if (ele.cake_id === id) {
                    ele.count++
                        flag = false
                }
              
            })

            if (flag) {
            
                oldarr1.push({
                        count: 1,
                        flag: true,
                ...json
                })
           
               
            }
            localStorage.setItem('cakeArr', JSON.stringify(oldarr1))
            
            $('.zfg-details-jer').css({
                display: "block"
            })
            setTimeout(() => {
                $('.zfg-details-jer').css({
                    display: "none"

                })

            }, 1000)

            window.history.go(0)
            // let ttt
            // 去重
            // newArr.forEach(ele => {
            //     if (ele.cake_id === id) {
            //         ele.count++
            //         flag = false
            //     }
            // })
            // jsonArrn.push({
            //     count: 1,
            //     flag: true,
            //     ...json
            // })
            // // 存一个商品对象值

            // if (localStorage.getItem('arr')) {

            //     jsonArr = JSON.parse(localStorage.getItem('arr'))
            //     let flag = true

            //     // 去重
            //     jsonArr.forEach(ele => {
            //         if (ele.cake_id === id) {
            //             ele.count++
            //             flag = false
            //         }
            //     })

            //     // 存一个商品对象值
            //     if (flag) {
            //         jsonArrn.forEach(ele => {
            //             if (ele.cake_id === id) {
            //                 jsonArr.push({
            //                     count: 1,
            //                     flag: true,
            //                     ...ele
            //                 })
            //             }
            //         })
            //     }

            //     localStorage.setItem('arr', JSON.stringify(jsonArr))
            // } else {
            //     jsonArr.push({
            //         count: 1,
            //         flag: true,
            //         ...json
            //     })
            //     localStorage.setItem('arr', JSON.stringify(jsonArr))


            //     // jsonArr.push({
            //     //     count:1,
            // }

            //     flag:true,
            //     ...json
            //    })
            // console.log(jsonArr.length);

            // localStorage.setItem('jsonArrlength', JSON.stringify(jsonArr.length))

            // 存到购物车列表页
            // localStorage.setItem('shopArr', JSON.stringify(newArr))
         


        })
        let zfghdnav = document.querySelector(".zfg-headernav")
        zfghdnav.innerHTML = `
    <h2>${json.cake_Ename}</h2>
    <p class="zfg-headernavp">¥<span>${json.cake_price}</span>/${json.cake_weight}</p>
    `

        // 根据浏览器高度获取高度显示导航
        var winHeight = document.documentElement.clientHeight;
        let nav = document.querySelector(".zfg-cake-headernav");
        window.onscroll = scrollHandler;

        function scrollHandler() {
            var toTop = document.documentElement.scrollTop || document.body.scrollTop;
            nav.style.position = "fixed";

            nav.style.zIndex = "1999";
            if (toTop >= winHeight) {
                nav.style.display = "block";
            } else {
                nav.style.display = "none";
            }
        }
       
        let zfgbigimg = document.querySelector(".zfg-details-bigimg")
        zfgbigimg.innerHTML = `
    <img data-src="${json.cake_detail_big_img1}" alt="">
    <img data-src="${json.cake_detail_big_img2}" alt="">
    <img data-src="${json.cake_detail_big_img3}" alt="">
    <img data-src="${json.cake_detail_big_img4}" alt="">
    `

    })

    


})();